<template>
  <div>
    <searchbar @monitorCount="productCount" @RefreshSearch="getSearchTag"></searchbar>
    <div class="searchBox">

      <div class="search-noData" v-show="noProductData">没有找到相关商品</div>

      <div class="search-item">
        <h2 class="search-item-title">最近的搜索结果 <i class="iconfont icon-shanchu" @click="removeSearchTag"></i></h2>
        <ul>
          <li v-for="(item,index) in searchTagArr" :key="index"  @click="toProductList(item)">
            <span>{{item}}</span>
            <i class="iconfont icon-xiayige"></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {getStorage,removeStorage} from '@/utils/wechat'
import constants from '@/constants/constants'
import searchbar from '@/components/search-bar'

export default {
  data(){
    return{
      noProductData:false,
      searchTagArr:[]
    }
  },
  computed: {
  },
  onLoad(){
    this.getSearchTag()
  },
  methods: {
    toProductList(tag) {
      this.$wx.jumper('../productList2/main?word='+ tag +'&title='+ tag)
    },
    productCount(flag){
      this.noProductData = flag
    },
    async getSearchTag(){
      const searchTab = getStorage(constants.STORE_CONSTANTS.KEY_SEARCH_TAG)
      this.searchTagArr = searchTab
    },
    async removeSearchTag(){
      await removeStorage(constants.STORE_CONSTANTS.KEY_SEARCH_TAG)
      this.searchTagArr = []
      this.$root.$eventHub.$emit('removeTag')
    }
  },
  components: {
    searchbar
  }
}
</script>

<style>
.searchBox {
  border-top: 1px solid #d4d4d4;
}
.search-noData{padding: 4%; text-align: center; color: #999}

.search-item-title {
  color: #999;
  font-weight: 600;
  margin-top: 6px;
  padding: 6px 12px;
}
.search-item-title i {
  float: right;
  margin-right: 6px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  text-align: center;
  background: #fff;
  color: #000;
  border-radius: 50%;
  margin-top: 2px;
}
.search-item ul li {
  overflow: hidden;
  padding: 0 12px;
  margin-bottom: 1px;
  background: #fff;
  line-height: 44px;
}
.search-item ul li span {
  font-weight: bold;
}
.search-item ul li font {
  color: #999;
  margin-left: 8px;
}
.search-item ul li .iconfont {
  float: right;
}
</style>
